<template>
  <div class="profile-pages">
    <van-nav-bar title="个人资料" left-arrow @click-left="$router.push('/mine')" />
    <van-cell-group class="userInfo">
      <van-cell title="头像" center @click="toUpdateProfile('avatar')">
        <template #default>
          <van-image fit="cover" round width="1.6rem" height="1.6rem"
            :src="allUserInfo.avatar ? allUserInfo.avatar : logoImg" />
        </template>
      </van-cell>

      <!-- <van-cell title="收款码" center @click="toUpdateProfile('qode')">
        <template #default>
          <van-image
            fit="cover"
            round
            width="1.6rem"
            height="1.6rem"
            :src="allUserInfo.avatar ? allUserInfo.avatar : logoImg"
          />
        </template>
      </van-cell> -->

      <van-cell title="昵称" :value="allUserInfo.nick_name || '近聘'" is-link @click="toUpdateProfile('nick_name')" />
      <van-cell title="提现设置" is-link @click="setcashinfo()" />
      <van-cell title="账号" :value="allUserInfo.ids" @click="handleAccount" />
      <van-cell title="账号状态" is-link @click="toDisplayProfile('账号状态')" />
      <van-cell v-if="allUserInfo.mobile" title="手机号" :value="allUserInfo.mobile" is-link @click="prohibitUpdatePhone" />
      <van-cell v-else title="手机号" :value="'请绑定手机号'" />
      <!-- <van-cell title="性别" :value="allUserInfo.gender_desc" is-link @click="toUpdateProfile('gender')" />
      <van-cell title="QQ号" :value="allUserInfo.qq_num" is-link @click="toUpdateProfile('qq_num')" />
      <van-cell title="微信号" :value="allUserInfo.wx_num" is-link @click="toUpdateProfile('wx_num')" />
      <van-cell title="邮箱" :value="allUserInfo.email" is-link @click="toUpdateProfile('email')" /> -->
      <van-cell title="支付密码" :value="allUserInfo.issetpaypwd ? '修改支付密码' : '未设置支付密码'" is-link center
        :label="'点击' + (allUserInfo.issetpaypwd ? '修改' : '设置') + '支付密码'" @click="$router.push('/payPwd')" />
      <!-- <van-cell title="认证信息" :value="allUserInfo.certification_state_desc" /> -->
      <van-badge :content="reportCount > 0 ? reportCount : ''" max="99">
        <van-cell  value="举报通知" is-link @click="toComplaintList('举报通知', reportCount)" />
      </van-badge>
      <!--      <van-badge :content="suggestCount > 0 ? suggestCount : ''" max="99">
        <van-cell value="投诉建议通知" is-link @click="toComplaintList('投诉建议通知', suggestCount)" />
      </van-badge>-->
      <van-cell title="隐私设置" is-link @click="toPrivacySetting" />
      <van-cell title="我要做代招" is-link value="申请查看代招费" @click="showRecruitment = true"/>
      <van-cell title="版本更新" :value="version" v-if="isShowVersion" is-link @click="versionUpdate" />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button color="#1989fa" block round class="updateInfo" @click="$router.push('/changePwd')">修改密码
      </van-button>
    </div>
    <div style="margin: 16px">
      <van-button type="danger" block round class="loginOut" @click="userLoginOut">退出登录</van-button>
    </div>
    <div style="margin: 16px">
      <van-button color="green" block round class="loginOut" @click="cancellation">注销账号</van-button>
    </div>

    <van-popup v-model:show="showVersion" round :overlay="true" data-disable-auto-close="false">
      <div class="version_box">
        <div class="title_version">版本更新</div>
        <div class="describe_version">当前软件有新版本，{{ android_remark }},请确认更新</div>
        <div class="btn">
          <a class="apk_url" :href="apkUrl">确认</a>
        </div>
      </div>
    </van-popup>

    <!-- 代招 -->
    <van-popup v-model:show="showRecruitment" round :overlay="true" data-disable-auto-close="false">
      <div class="version_box">
        <div class="title_version">温馨提醒</div>
        <div class="describe_version">做近聘代招人，赚代招费请联系平台客服13790143381</div>
        <div class="bottom">
          <van-button type="default" size="small" @click="showRecruitment = false">取消</van-button>
          <van-button type="danger" size="small" @click="copy('13790143381')">复制客服微信号</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Toast, Dialog } from 'vant'
import logoImg from '@/assets/logo.png'
import config from '../../../package.json'
export default {
  name: 'profile',

  data() {
    return {
      isShowVersion: 0,
      showRecruitment:false,
      showVersion: false,
      android_remark: '',
      apkUrl: '',
      version: config.version, // 获取包的信息
      logoImg,
      // 收到的举报条数数
      reportCount: 0,
      // 收到的投诉条数
      suggestCount: 0,
      service_number: '13790143381'
    }
  },
  computed: {
    ...mapGetters(['allUserInfo'])
  },
  created() {
    this.$store.dispatch('getUserAllInfo')
    // 获取举报未读消息
    // this.getMyNotice()
  },
  mounted() {
    let _self = this
    const userAgent = navigator.appVersion
    if (userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1) {
      _self.isShowVersion = 1
    }
    setTimeout(() => {
      // 获取举报未读消息
      this.getMyNotice()
    }, 1000)
  },
  methods: {
    // 注销账号
    async cancellation(){//logoff
      let _self = this
      let params = {userId:this.allUserInfo.id}
      const res = await this.$api.user.logoff(params)
      console.log(res)
      if(res.code == 200){
        Toast('注销成功!')
         _self.$router.push('/login')
      }
    },
    copy: function(val) {
      let that = this
      this.$copyText(val).then(
        function() {
          Toast('复制成功!')
          that.showRecruitment = false
        },
        function() {
          Toast('复制出错')
        }
      )
    },
    async versionUpdate() {
      console.log(this.version)
      const res = await this.$api.user.Version()
      if (res.code === 200) {
        if (JSON.stringify(res.data.android_version) != JSON.stringify(this.version)) {
          this.showVersion = true
          this.apkUrl = res.data.android_download_url
          this.android_remark = res.data.android_remark
        } else {
          Toast('已是最新版本')
        }
      }
    },
    // 提现
    setcashinfo() {
      this.$router.push('/setcashinfo')
    },
    prohibitUpdatePhone() {
      Dialog.confirm({
        title: '温馨提醒',
        message: `为了您的账号安全，不允许私自修改手机号！若您需要修改，请添加客服的微信号：${this.service_number}，拨打客服的微信电话，让客服协助您修改。`,
        messageAlign: 'left',
        confirmButtonText: '复制客服微信号'
      })
        .then(() => {
          // 点击确定
          this.$copyText(this.service_number).then(
            function (e) {
              Toast('复制成功')
            },
            function (e) {
              Toast('复制出错')
            }
          )
        })
        .catch(() => {
          // on cancel
        })
    },
    toUpdateProfile(type) {
      // 使用路由的name属性, 必须唯一
      this.$router.push({
        name: 'updateProfile',
        params: {
          profileString: type
        }
      })
    },
    toDisplayProfile(title) {
      // 使用路由的name属性, 必须唯一
      this.$router.push({
        name: 'displayProfile',
        query: {
          title
        }
      })
    },
    handleAccount() {
      Toast('不允许修改')
    },
    userLoginOut() {
      localStorage.removeItem('chatUserList')
      this.$api.user.reqLogout()
      // 清除状态
      window.localStorage.clear()
      setTimeout(() => {
        this.$store.dispatch('logOut')
        this.$router.push('/login')
      }, 1000)
    },
    // 未读消息
    getMyNotice() {
      // const {id: user_id} = this.allUserInfo
      // console.log('getMyNotice', companyId)
      this.$api.user.getMyNotice({ pagesize: 20, pageindex: 1 }).then(res => {
        if (res.code === 200) {
          const { reportCount, suggestCount } = res.data

          this.reportCount = reportCount || 0
          this.suggestCount = suggestCount || 0
        } else {
          Toast(res.msg || '接口错误')
        }
      })
    },
    // 跳转举报投诉列表页
    toComplaintList(title, count) {
      // const {id: user_id} = this.allUserInfo
      console.log('companyId, jobId', this.allUserInfo)
      // 被举报用户无法查看详情
      // if (+this.allUserInfo.user_status !== 0) {
      //   return this.$toast(this.allUserInfo.user_status_desc || '当前账户异常')
      // }

      if (count > 0) {
        this.$router.push({
          path: '/complaintList',
          query: { title, from: 'user' }
        })
      } else {
        this.$toast(`暂时没有收到${title}哦~`)
      }
    },
    // 跳转到隐私设置页面
    toPrivacySetting() {
      // TODO: by liuxiaoling
      this.$router.push({
        name: 'privacySetting'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-pages {
  width: 100%;

  .updateInfo {
    margin-top: 16px;
  }

  .loginOut {
    margin-top: 16px;
  }

  /deep/ .van-badge__wrapper {
    display: block;

    .van-badge--fixed {
      top: 22px;
      right: 50px;
    }
  }
}

.version_box {
  width: 300px;
  padding: 20px 0;
  .bottom{

    padding: 0 30px;
    display: flex;
    justify-content: space-between;
  }
}

.title_version {
  width: 100%;
  text-align: center;
  font-size: 16px;
}

.describe_version {
  padding: 20px 15px;
  text-align: center;
}

.btn {
  padding-top: 10px;
  width: 100%;
  border-top: 1px solid #ccc;

  text-align: center;
}

.apk_url {
  color: red;
  font-size: 16px;
}
</style>
